<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">收货地址</block>
		</cu-custom>
		<view class="address-list">
			<view class="address" v-for="(item,index) in qiaoChuList" :key="index" @click="truthVal" :data-id="item.id">
				<view class="">
					<view class="">
						<view class="text-cut ">
							{{item.name}}
						</view>
						<view class="">
							{{item.phone}}
						</view>
					</view>
					<view class="">
						<view class="add-text">
							{{item.all_address_str}}{{item.address}}
						</view>
					</view>
				</view>
				<view class="set" @tap.stop="goAddNew('up',item)">
					编辑
				</view>
			</view>
			<no-content :showType="'address'" v-if="tNoCont"></no-content>
		</view>
		<view class="submmit bg-colorP" @click="goAddNew">
			添加收货地址
		</view>
	</view>
</template>

<script>
	import tuiIcon from "@/components/thorUI/icon.vue";
	import noContent from "./component/noContent.vue";
	export default ({
		components: {
			tuiIcon,
			noContent
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				tNoCont: false,
				qiaoChuList: []
			}
		},
		methods: {
			truthVal(e) {
				uni.setStorageSync('truthAddId', e.currentTarget.dataset.id)
				uni.navigateBack({
					delta: 1
				})
			},
			goAddNew(status, data) {
				if (status) {
					var data = JSON.stringify(data)
					uni.navigateTo({
						url: '/pages/addAdress?data=' + data
					});
					return
				}
				uni.navigateTo({
					url: '/pages/addAdress'
				});
			},
			// 获取地址
			getAddressData() {
				var that = this;
				that.tNoCont = false;
				this.$request({
					url: '/UserRelation/get_list',
					success: res => {
						if (res.data.status == 1) {
							that.qiaoChuList = res.data.data
							if (that.qiaoChuList.length == 0) {
								that.tNoCont = true
								if (that.status) {
									uni.showModal({
										content: '请先添加地址，在点击地址进行选择',
										showCancel: false,
										confirmText: '知道了'
									})
								}
							} else {
								if (that.status) {
									uni.showModal({
										content: '请直接点击地址选择',
										showCancel: false,
										confirmText: '知道了'
									})
								}
							}
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
		onShow() {
			this.getAddressData()
		},
		// 初始化
		onLoad(options) {
			this.status = options.status ? options.status : ''
		}
	})
</script>

<style>
	page {
		background: #f5f5f5;
	}

	.address>view:nth-child(1)>view .tui-icon {
		margin-right: 10rpx;
	}
</style>
<style scoped>
	.address-list {
		width: 100%;
		padding-bottom: 120rpx;
		padding-top: 20rpx;
	}

	.address {
		width: 100%;
		padding: 20rpx 0 20rpx 24rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.address>view:nth-child(1) {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.address>view:nth-child(1)>view {
		display: flex;
		font-size: 28rpx;
		color: #666;
		line-height: 45rpx;
	}

	.address>view:nth-child(1)>view:nth-child(1) {
		margin-bottom: 20rpx;
		display: flex;
		color: #333333;
		font-size: 30rpx;
	}

	.address>view:nth-child(1)>view:nth-child(1)>view:nth-child(1) {
		margin-right: 20rpx;
		font-weight: 500;
		max-width: 350rpx;
	}

	.address>view:nth-child(1)>view:nth-child(1)>view:nth-child(2) {
		font-weight: 300;
	}

	.address .add-text {
		max-width: 600rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.set {
		width: 110rpx;
		border-left: solid 1rpx #efefef;
		height: 65rpx;
		line-height: 65rpx;
		color: #999999;
		font-size: 28rpx;
		letter-spacing: 1rpx;
		text-align: center;
	}

	.submmit {
		width: 702rpx;
		height: 98rpx;
		border-radius: 8rpx;
		font-size: 36rpx;
		text-align: center;
		line-height: 98rpx;
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		margin-left: -351rpx;
		font-weight: 400;
	}
</style>
